<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{margin: 0 auto;}
.machine{background-color:#8C8C8C; padding-top:53px;padding-left:27px; width:525px; border: 1px solid #555555;height:345px; background-image: url("/pencil_factory/img/skin.gif"); background-repeat: no-repeat;}

#t1{width:250px; height:200px; border: 1px solid #B8B8B8; display: block; float: left;}
.b1{padding: 5px 0 0 10px; display:block; width:70px;height:15px; color:#626262; }
.d1{ float: right; width:250px; height:32px;border:1px solid #555555; background-color: #D9E5FF;float: left;}
.d2{font-size:13px;font-weight:bold; width:200px; height:12px; display:block; background-color: #41FF3A;}

.d3{width:250px; height:80px; display:block; background-color: #FFFFDE;clear: both;}

.d4{width:200px; height:30px; display:block; border:2px solid #000000;}
#d5{width:15%; height:30px; display:block; background-color: #5587ED;}


.state_box{text-align:center; height:170px; margin-left:15px; width:40px; border:10px solid #555555; float: left; background-color:#EAEAEA; padding-top: 10px;}
.lb_01{font-weight: bold;}
.state_box2{text-align:center; height:185px; margin-left:5px; width:160px; border:2px solid #5587ED; float: left; background-color:#EAEAEA; padding-top: 10px;}

#db_area{clear: both; border:2px solid #555555;width:498px;height: 100px; overflow: scroll; background-color:#EAEAEA; }
.li_box{width: 20px; height: 20px; display: block; background-color: #000042;margin: 5px 0 5px 0;}


.name_ma{text-align: center; width:498px; font-weight: bold; font-size: 24px; margin-top: 8px;color:#F6F6F6;}

</style>

<link type="text/css" href="/pencil_factory/css/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="/pencil_factory/js/jquery.js"></script>
<script type="text/javascript" src="/pencil_factory/js/jquery-ui.js"></script>


<script type="text/javascript">
$(document).ready(function(){
//	alert("돼냐?");
	
	
	
	state_machine(flagState);
	
	
});
var flagState=1;

function state_machine(flagState){
	if(flagState==0){
		$("#st_box3").css({"background-color":"#ff0000"});	
	}
	if(flagState == 1){
		$("#st_box1").css({"background-color":"#ABF200"});	
	}
	if(flagState == 2){
		$("#st_box2").css({"background-color":"#FFFF48"});		
	}
}





</script>



</head>
<body>
<div class="machine">
	<div id="t1">

		<div class="d1"><b class="b1">점토량</b><span class="d2">15</span></div>
		<div class="d1"><b class="b1">흑연</b><span class="d2">10</span></div>
		<div class="d1"><b class="b1">물</b><span class="d2">40</span></div>
		<div class="d1"><b class="b1">기계상태</b><span class="d2">20</span></div>
		
		<div class="d3">
			<span class="b1"><b>진행률</b></span>
			<span class="d4"><span id="d5">50</span></span>
		</div>	
	</div>
	<div class="state_box">
		<div><em class="lb_01">작동</em><span id="st_box1" class="li_box"></span></div>
		<div><em class="lb_01">알림</em><span id="st_box2" class="li_box"></span></div>
		<div><em class="lb_01">종료</em><span id="st_box3" class="li_box"></span></div>
	</div>
	<div class="state_box2">
		<table>
			<tr>
				<td width='90px'>시작시간:</td><td>12:00:12</td>
			</tr>
			<tr>
				<td>완료시간:</td><td>12:06:12</td>
			</tr>
			<tr>
				<td>생산량:</td><td>787</td>
			</tr>
			<tr>
				<td colspan="2">
				<input type="button" value="시작">
				<input type="button" value="종료">
				</td>
			</tr>
		</table>
	</div>
	
	<div id="db_area">
		<div></div>
			FD1ㅇ00<BR>
			FD1ㅇ00<BR>
			FD1ㅇ00<BR>
			FD1ㅇ00<BR>
			FD1ㅇ00<BR>
			FD1ㅇ00<BR>
			FD1ㅇ00<BR>	
	</div>
	<div class="name_ma">1. 반죽기계</div>
</div>





</body>
</html>